<template>
	<view class="container">
		<van-tabs :active="active" @change.stop="changeType">
			<van-tab v-for="item in status" :title="item.name">
				<view class="orderBox" v-for="(item, index) in orders" :key="item.id" >
					<view class="header" @click="routeToDetail(data)">
						{{item.danger_name}}
						<text >查看详情 》</text>
					</view>
					<view>订单编号：{{item.order_code}}</view>
					<view>预约时间：{{item.handle_time}}</view>
					<view>备注信息：{{item.handle_time}}</view>
					<view class="footer">
						<view>预估价格：{{item.deal_price}}¥</view>
						<van-button size="mini" v-if="!'3,4'.indexOf(item.status)" @click='cancleOrder(item.order_id)'>
							取消订单</van-button>
					</view>
				</view>
			</van-tab>
				<view  class="noData" v-if="!orders.length">暂无数据</view>
		</van-tabs>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0,
			status:[
				{status:'1',name:'待处理'},
				{status:'2',name:'处理中'},
				{status:'3',name:'已完成'},
				{status:'4',name:'待取消'}
			],
			orders:[
				{
					handle_time: '1111',
					cancel_note: '要要',
					company_handle: '清华大学合肥公共安全研究院',
					deal_time: '2021-03-15 23:06:06',
					order_time: '2021-03-15 23:06:03',
					order_note: 'xx',
					danger_upload_id: '1',
					danger_name: '感染性废物',
					contact: 'xx',
					tel: '111',
					done_note: '我我',
					handle_price: 121,
					cancel_time: '2021-03-15 23:06:11',
					danger_upload_name: '要人工',
					address: '222',
					company_id: '40289fcb782746e30178274705da0004',
					deal_price: 12,
					order_code: '1',
					wx_user_id: '1',
					danger_id: '4028c07c782567bd0178257bf219005a',
					company_name: 'xx',
					nick_name: '小鱼丸～',
					order_id: '1',
					status: '2',
					done_time: '2021-03-15 23:06:08'
				},
				{
					handle_time: '1111',
					cancel_note: '要要',
					company_handle: '清华大学合肥公共安全研究院',
					deal_time: '2021-03-15 23:06:06',
					order_time: '2021-03-15 23:06:03',
					order_note: 'xx',
					danger_upload_id: '1',
					danger_name: '感染性废物',
					contact: 'xx',
					tel: '111',
					done_note: '我我',
					handle_price: 121,
					cancel_time: '2021-03-15 23:06:11',
					danger_upload_name: '要人工',
					address: '222',
					company_id: '40289fcb782746e30178274705da0004',
					deal_price: 12,
					order_code: '1',
					wx_user_id: '1',
					danger_id: '4028c07c782567bd0178257bf219005a',
					company_name: 'xx',
					nick_name: '小鱼丸～',
					order_id: '1',
					status: '3',
					done_time: '2021-03-15 23:06:08'
				},
				{
					handle_time: '1111',
					cancel_note: '要要',
					company_handle: '清华大学合肥公共安全研究院',
					deal_time: '2021-03-15 23:06:06',
					order_time: '2021-03-15 23:06:03',
					order_note: 'xx',
					danger_upload_id: '1',
					danger_name: '感染性废物',
					contact: 'xx',
					tel: '111',
					done_note: '我我',
					handle_price: 121,
					cancel_time: '2021-03-15 23:06:11',
					danger_upload_name: '要人工',
					address: '222',
					company_id: '40289fcb782746e30178274705da0004',
					deal_price: 12,
					order_code: '1',
					wx_user_id: '1',
					danger_id: '4028c07c782567bd0178257bf219005a',
					company_name: 'xx',
					nick_name: '小鱼丸～',
					order_id: '1',
					status: '4',
					done_time: '2021-03-15 23:06:08'
				}
			]
		};
	},
	onLoad(params) {
		this.active = parseInt(params.index)
	},
	onShow() {
		// this.getOrderList(this.status[this.active]['status'])
		
	},
	methods: {
		changeType(e) {
			let orders =[{
					handle_time: '1111',
					cancel_note: '要要',
					company_handle: '清华大学合肥公共安全研究院',
					deal_time: '2021-03-15 23:06:06',
					order_time: '2021-03-15 23:06:03',
					order_note: 'xx',
					danger_upload_id: '1',
					danger_name: '感染性废物',
					contact: 'xx',
					tel: '111',
					done_note: '我我',
					handle_price: 121,
					cancel_time: '2021-03-15 23:06:11',
					danger_upload_name: '要人工',
					address: '222',
					company_id: '40289fcb782746e30178274705da0004',
					deal_price: 12,
					order_code: '1',
					wx_user_id: '1',
					danger_id: '4028c07c782567bd0178257bf219005a',
					company_name: 'xx',
					nick_name: '小鱼丸～',
					order_id: '1',
					status: '1',
					done_time: '2021-03-15 23:06:08'
				},
				{
					handle_time: '1111',
					cancel_note: '要要',
					company_handle: '清华大学合肥公共安全研究院',
					deal_time: '2021-03-15 23:06:06',
					order_time: '2021-03-15 23:06:03',
					order_note: 'xx',
					danger_upload_id: '1',
					danger_name: '感染性废物',
					contact: 'xx',
					tel: '111',
					done_note: '我我',
					handle_price: 121,
					cancel_time: '2021-03-15 23:06:11',
					danger_upload_name: '要人工',
					address: '222',
					company_id: '40289fcb782746e30178274705da0004',
					deal_price: 12,
					order_code: '1',
					wx_user_id: '1',
					danger_id: '4028c07c782567bd0178257bf219005a',
					company_name: 'xx',
					nick_name: '小鱼丸～',
					order_id: '1',
					status: '4',
					done_time: '2021-03-15 23:06:08'
				}
			]
			this.active = e.target.index ;
			// this.orders = orders.filter(item =>{
			// 	item.status == JSON.stringify(this.active +1) 
			// })
			// console.log(this.orders)
			// this.getOrderList(this.status[this.active]['status'])
		},
		routeToDetail(data) {
			uni.setStorage({
				key:'orderDetail',
				data,
				success() {
					uni.navigateTo({
						url: '../orderDetail/orderDetail'
					});
				}
			})
		},
		getOrderList(status){
			this.$api.getOrderList({
				status
			}).then(res => {
				console.log(res)
				this.data = res.list
			})
		},
		cancleOrder(order_id){
			this.$api.cancelOrder({
				order_id
			}).then(res => {
				uni.showToast({
					icon:'success',
					title:'取消成功'
				})
				this.getOrderList(this.status[this.active]['status'])
			})
		}
	}
};
</script>

<style lang="scss">
.orderBox {
	border-radius: 10rpx;
	margin:20rpx;
	background: #fff;
	padding: 20rpx;
	&>view{
		margin-bottom: 20rpx;
	}
	.header{
		height: 60rpx;
		border-bottom: 2rpx solid #F1F1F1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.footer{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-top: 2rpx solid #F1F1F1;
		margin-bottom: 0;
		
	}
}
</style>
